interface Player {
  bankerCount: number,
  lftId: number,
  nickname: string,
  owner: boolean,
  point: number,
  seatIndex: number,
  suitDescribe: Array<{name: string, count: number}>,
  suitMap: any,
  suitPatterns: any,
  uid: string,
  winner: boolean,
  headUrl: string
}

declare var window: any

class UserLabel extends eui.Component {
  private userGroup: eui.Group
  private labelBg: eui.Image
  public idFrame: eui.Image
  public headUrl: eui.Image
  public mask: eui.Image
  public headUrlFrame: eui.Image
  private useridGroup: eui.Group
  private userContent: eui.Group
  private userScore: eui.Group
  private username: eui.Label
  private userid: eui.Label
  public player: Player
  constructor(player) {
    super()
    this.once(eui.UIEvent.COMPLETE, this.onComplete, this)
    this.player = player
    this.skinName = `<e:Skin class="MajiangSkin" width="262" height="380" xmlns:e="http://ns.egret.com/eui" xmlns:w="http://ns.egret.com/wing">
      <e:Image id="labelBg" x="0" y="0" width="262" height="380"></e:Image>
      <e:Image id="headUrlFrame" x="100" y="77" width="63" height="56"></e:Image>
      <e:Image id="headUrl" x="103" y="80" width="56" height="50"></e:Image>
      <e:Image id="mask" x="103" y="80" width="56" height="50"></e:Image>
      <e:Group id="userGroup" width="262" height="360">
        <e:Label horizontalCenter="0" id="username" text="" textColor="0xd85d02" size="28" x="0" y="10"
         percentWidth="80" textAlign="center" height="30"></e:Label>
        <e:Group id="useridGroup" x="0" y="48" percentWidth="100" height="43">
          <e:Image id="idFrame" x="0" y="0" width="26" height="26"></e:Image>
          <e:Label id="userid" top="8" textColor="0x845421" text="" size="24" height="43"></e:Label>
        </e:Group>
        <e:Group id="userContent" x="0" y="136" width="220" height="168">
        </e:Group>
        <e:Group id="userScore" x="0" y="300" width="262" height="104">
        </e:Group>
      </e:Group>
    </e:Skin>`
  }

  scoreNumber(point): Array<string> {
    var pointSigned = point > 0 ? '+' + point : point
    var numbers = (pointSigned + '').split('')
    return numbers.map(num => {
      if (point >= 0) {
        return `${num}_png`
      }
      if (num === '-') {
        return '-_png'
      }
      return `1${num}_png`
    })
  }

  private onComplete(e: eui.UIEvent) {
    const player = this.player
    const bgSrc = player.point > 0 ? 'win_png' : 'lose_png'
    this.labelBg.source = bgSrc

    var hLayout:eui.HorizontalLayout = new eui.HorizontalLayout()
    hLayout.gap = 10
    hLayout.horizontalAlign = egret.HorizontalAlign.CENTER
    this.useridGroup.layout = hLayout   /// 水平布局

    var vLayout:eui.VerticalLayout = new eui.VerticalLayout()
    vLayout.gap = 10
    vLayout.paddingTop = 5
    vLayout.paddingLeft = 25
    vLayout.horizontalAlign = egret.HorizontalAlign.LEFT
    this.userContent.layout = vLayout //设置问垂直布局

    this.player.suitDescribe.forEach(element => {
      const label = new eui.Label(`${element.name}:           ${element.count}`)
      label.size = 23
      label.textColor = 0x845421
      this.userContent.addChild(label)
    })

    this.username.text = this.player.nickname
    this.userid.text = this.player.lftId + ''

    if (this.player.winner) {
      const winner = new eui.Image('big-winner_png')
      winner.right = 0
      winner.bottom = -15
      winner.height = 100
      winner.width = 80
      this.userGroup.addChild(winner)
    }
    if (this.player.owner) {
      this.useridGroup.addChild(new eui.Image('owner_png'))
    }
    this.idFrame.source = 'id-frame_png'
    this.mask.source = 'mask_png'
    this.headUrlFrame.source = 'headurl-frame_png'
    if(this.player.headUrl) {
      if (window.location.href.match('10.10.10')) {
        this.headUrl.source = this.player.headUrl.replace('./', 'https://c-c.jiahuagame.com/console/')
      } else {
        this.headUrl.source = this.player.headUrl
      }
    } else {
      
    }
    this.headUrl.mask = this.mask

    var hLayoutScore:eui.HorizontalLayout = new eui.HorizontalLayout()
    hLayoutScore.gap = 0
    hLayoutScore.paddingRight = 30
    hLayoutScore.horizontalAlign = egret.HorizontalAlign.CENTER
    this.userScore.layout = hLayoutScore   /// 水平布局

    const scoreNumber = this.scoreNumber(this.player.point)
    scoreNumber.forEach(number => {
      this.userScore.addChild(new eui.Image(number))
    })

    if (this.$hasAddToStage) {
      window.eventDispatcher.dispatchEvent(new egret.Event('ok'))
    } else {
      this.once(eui.UIEvent.ADDED_TO_STAGE, function () {
        setTimeout(() => {
          window.eventDispatcher.dispatchEvent(new egret.Event('ok'))
        }, window.labelRenderTime)
      }, this)
    }
  }
}

export default UserLabel